<template>
    <div>
        <page-view>
            <template #option>
                <div class="btn-box">
                    <el-button type="primary" @click="add">新增</el-button>
                    <el-button type="primary" @click="exportExcel" :loading="loading">导出</el-button>
                </div>
            </template>

            <template #form>

                <SearchForm :data-form="formInline" @on-search="onSearch" @onReset="onSearch">
                    <el-form-item prop="standardTypeCode">
                        <el-select v-model="formInline.standardTypeCode" clearable placeholder="请选择标准类型">
                            <el-option v-for="item in TYPE_OPTIONS" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="standardName">
                        <el-input v-model="formInline.standardName" placeholder="请输入名称" clearable />
                    </el-form-item>
                    <el-form-item l prop="enabled">
                        <el-select v-model="formInline.enabled" clearable placeholder="请选择状态">
                            <el-option v-for="item in STATUS_LIST" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </SearchForm>
            </template>
            <template #table="tableScope">
              <PubilcTable :isSlot="false" :table-data="tableData" :tableHeight="tableScope.tableHeight" :list-config="STANDARD_CONFIG" :page-data="pageData"
                @on-action="onAction" :translateTextDeal="translateTextDeal" :actionLimitName="actionLimitName" />
            </template>
        </page-view>
    </div>
</template>
<script  setup name="Standard">
import { reactive } from 'vue'
import { STANDARD_CONFIG, STATUS_LIST, TYPE_OPTIONS, TOHORO_OPTIONS, LIMIT_OPTIONS } from '../Common/config'
import { statusText } from '@/util/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { downloadFile } from '@/util/downFile'
import { useUserStore } from '@/store/modules/user'
import api from '@/api'
import dayjs from 'dayjs'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const formInline = ref({
    standardName: '',
    standardTypeCode: '',
    enabled: true
})
const pageData = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableData = ref([])

const loading = ref(false)



onMounted(() => {

    getList()
})
const onSearch = () => {
    pageData.value.pageNum = 1
    getList()
}

// 获取列表数据
const getList = () => {
    const parms = {
        ...pageData.value,
        ...formInline.value
    }
    api.feeConfig.feeStandardList(parms).then(res => {
        const { list, total } = res
        list.forEach(item => {
            item['createTime'] = dayjs(item['createTime']).format('YYYY-MM-DD');
        })
        pageData.value.total = total
        tableData.value = list

    })

}

// 导出
const exportExcel = (row) => {
    loading.value = true
    const params = { ...formInline }
    api.feeConfig.feeStandarExport(params).then((res) => {
        console.log(res)
        downloadFile(res, '费用标准', 'xlsx')
        ElMessage({
            type: 'success',
            message: '导出成功!'
        });
        loading.value = false
    })
}

const editRow = (row) => {
    router.push({
        name: 'standardEdit',
        query: {
            type: 'edit',
            id: row.id
        }
    })

}
const updateStatus = (row) => {
    let text = row.enabled ? '停用' : '启用'
    ElMessageBox.confirm(`您确定要进行${text}操作吗?`, "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    }).then(() => {
        api.feeConfig.feeStandardUpdateStatus({ id: row.id, enabled: row.enabled ? false : true }).then((res) => {
            onSearch();
            ElMessage.success("操作成功");
        });
    });
};
const delRow = (row) => {
    ElMessageBox.confirm(
        '您确定要进行删除操作吗?',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            api.feeConfig.feeStandardDelete({ id: row.id }).then(res => {
                onSearch()
                ElMessage.success('操作成功')
            })
        })

}
// 列表操作 分页
const onAction = ([item, row]) => {
    const obj = {
        'edit': editRow,
        'look': toDetail,
        'del': delRow,
        'satate': updateStatus,
        'pageNum': getList,
        'pageSize': onSearch
    }
    if (typeof item === 'string') {
        pageData.value[item] = row
        obj[item]()
    } else {
        obj[item.alias](row)
    }
}

const add = () => {
    router.push({
        name: 'standardAdd',
        query: {
            type: 'add'
        }
    })

}

const toDetail = (row) => {
    router.push({
        name: 'standardDetail',
        query: {
            id: row.id
        }
    })
}

// 操作按钮名称调整
const actionLimitName = ([row, filed]) => {
    if (filed.alias === 'satate') {
        filed['label'] = row.enabled ? '停用' : '启用'
    }

    return filed.label
}
const translateTextDeal = (item, list) => {
    let text = ''
    // 关联费用类型
    if (item.alias == 'feeTypeDTOList') {
        list.forEach(item => {
            text += item.typeName + '、'
        })
    }
    // 同行人标准
    if (item.alias == 'companionStandard') {
        text = statusText(TOHORO_OPTIONS, list)
    }
    // 标准限制
    if (item.alias == 'afterExceed') {
        text = statusText(LIMIT_OPTIONS, list)
    }

    // 状态
    if (item.alias == 'enabled') {
        text = statusText(STATUS_LIST, list)
    }


    return text

}

onActivated(() => {
    getList()

})
</script>
